<template>
	<view class="recharge">
		<view class="list">
			<view class="listItem" v-for="(item,index) in walletLogData" :key="index">
				<view class="content">
					<view class="listTitemLeft">
						<view class="leftTitle">
							{{item.businessTypeName}}
						</view>
						<view class="leftContent">
							{{item.remark}}
						</view>
						<view class="leftContent">
							{{item.createTime}}
						</view>
					</view>
					
					<view class="rightRed" v-if="item.amount >0">
						+<text>{{item.amount}}</text>{{item.walletType?.currency}}
					</view>
					
					<view class="rightGreen" v-else>
						{{item.amount}}<text>{{item.walletType?.currency}}</text>
					</view>
				</view>
			
				<view class="line" v-if="index<walletLogData.length-1">
			
				</view>
			</view>
			<uni-load-more :status="moreFlag" />
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { userWalletLog } from "@/utils/api/wallet.ts"
	import { onPullDownRefresh,onReachBottom } from '@dcloudio/uni-app'

	const queryData = ref({
		pageNo: 1,
		pageSize: 10
 
	})
	const walletLogData = ref([])
	const moreFlag=ref('noMore')
	
	function loadWalletLog() {
		if (queryData.value.pageNo == 1) {
			walletLogData.value = [];
		}
		userWalletLog({ data: queryData.value }).then(res => {
			walletLogData.value.push(...res.data.list)
			if(res.data.list.length!=queryData.value.pageSize){
				moreFlag.value='noMore'
			}else{
				moreFlag.value='more'
			}
		})
	}
	
	function moreLoad(){
		queryData.value.pageNo+=1
		loadWalletLog()
	}
 
	loadWalletLog();
	
	onPullDownRefresh(() => {
		queryData.value.pageNo=1
		loadWalletLog();
		uni.stopPullDownRefresh();
	})
	
	onReachBottom(()=>{
		moreLoad()
	})
	
</script>

<style lang="scss">
	.recharge {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background: #F4F6FA;

		.list {
			margin-top: 24rpx;
			background: #FFF;
			width: 100%;

			.listItem {

				width: 100%;
				padding: 24rpx 32rpx;

				.content {
					// width: 600rpx;
					// height: 154rpx;

					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-bottom: 24rpx;
				}

				.leftTitle {
					height: 48rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 900;
					font-size: 32rpx;
					color: #262626;
					line-height: 48rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-bottom: 8rpx;
				}

				.line {
					width: 800rpx;
					height: 0rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					border: 1rpx solid #EBEBEB;
				}

				.leftContent {
					// width: 190rpx;
					height: 42rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 22rpx;
					color: #8C8C8C;
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.rightGreen {
					// width: 100rpx;
					height: 48rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 32rpx;
					color: #6AC922;
					line-height: 48rpx;
					text-align: right;
					font-style: normal;
					text-transform: none;
					display: flex;
					text{
						font-size: 32rpx;
						color: #6AC922;
						margin-left: 8rpx;
					}
				}

				.rightRed {
					// width: 100rpx;
					height: 48rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 32rpx;
					color: #FF263F;
					line-height: 48rpx;
					text-align: right;
					font-style: normal;
					text-transform: none;
					display: flex;
					text{
						font-size: 32rpx;
						color: #FF263F;
						margin: 0rpx 4rpx;
					}
				}
			}
		}
	}
</style>